import React from 'react'
import { Settings, ShoppingBag, Heart, BookOpen, Users, CreditCard, MapPin, HelpCircle, LogOut } from 'lucide-react'
import { motion } from 'framer-motion'
import { cn } from '../utils/cn'

const Profile: React.FC = () => {
  // 模拟用户数据
  const user = {
    name: '张妈妈',
    email: 'zhang@example.com',
    phone: '138****8888',
    avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20mom%20avatar%20cartoon%20style%20warm%20colors%20friendly%20smile%20mother%20character&image_size=square',
    memberSince: '2023-12-01',
    membershipLevel: '黄金会员',
    children: [
      {
        id: '1',
        name: '小明',
        age: 5,
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20boy%20avatar%20cartoon%20style%20age%205%20happy%20smile%20warm%20colors&image_size=square',
        interests: ['动物', '汽车', '恐龙'],
        readingLevel: '初级阅读者',
        booksRead: 15
      },
      {
        id: '2',
        name: '小红',
        age: 3,
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20girl%20avatar%20cartoon%20style%20age%203%20happy%20smile%20warm%20colors&image_size=square',
        interests: ['公主', '动物', '音乐'],
        readingLevel: '启蒙阶段',
        booksRead: 8
      }
    ]
  }

  const menuItems = [
    { icon: ShoppingBag, label: '我的订单', href: '#', color: 'primary' },
    { icon: Heart, label: '我的收藏', href: '#', color: 'red' },
    { icon: BookOpen, label: '阅读记录', href: '/reading', color: 'sky' },
    { icon: Users, label: '孩子档案', href: '#', color: 'leaf' },
    { icon: CreditCard, label: '支付方式', href: '#', color: 'orange' },
    { icon: MapPin, label: '收货地址', href: '#', color: 'purple' },
    { icon: Settings, label: '账户设置', href: '#', color: 'gray' },
    { icon: HelpCircle, label: '帮助中心', href: '#', color: 'indigo' },
  ]

  const recentOrders = [
    {
      id: 'ORD001',
      date: '2024-01-15',
      status: '已完成',
      total: 89.6,
      items: [
        { name: '小熊宝宝绘本', price: 28.8, quantity: 1 },
        { name: '我爸爸', price: 32.0, quantity: 1 },
        { name: '好饿的毛毛虫', price: 35.0, quantity: 1 }
      ]
    },
    {
      id: 'ORD002',
      date: '2024-01-10',
      status: '配送中',
      total: 58.8,
      items: [
        { name: '彩虹色的花', price: 0, quantity: 1 },
        { name: '猜猜我有多爱你', price: 29.9, quantity: 1 },
        { name: '小蓝和小黄', price: 0, quantity: 1 }
      ]
    }
  ]

  const getColorClasses = (color: string) => {
    const colors = {
      primary: 'bg-primary-100 text-primary-600',
      red: 'bg-red-100 text-red-600',
      sky: 'bg-sky-100 text-sky-600',
      leaf: 'bg-leaf-100 text-leaf-600',
      orange: 'bg-orange-100 text-orange-600',
      purple: 'bg-purple-100 text-purple-600',
      gray: 'bg-gray-100 text-gray-600',
      indigo: 'bg-indigo-100 text-indigo-600'
    }
    return colors[color as keyof typeof colors] || colors.gray
  }

  const ChildCard: React.FC<{ child: any }> = ({ child }) => {
    return (
      <motion.div
        whileHover={{ scale: 1.02 }}
        className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300"
      >
        <div className="flex items-center space-x-4 mb-4">
          <img
            src={child.avatar}
            alt={child.name}
            className="w-16 h-16 rounded-full border-4 border-primary-100"
          />
          <div className="flex-1">
            <h3 className="text-lg font-bold text-gray-800">{child.name}</h3>
            <p className="text-gray-600 text-sm">{child.age}岁 · {child.readingLevel}</p>
            <p className="text-primary-600 text-sm font-medium">已读 {child.booksRead} 本</p>
          </div>
        </div>
        
        <div className="mb-4">
          <h4 className="text-sm font-medium text-gray-700 mb-2">兴趣爱好</h4>
          <div className="flex flex-wrap gap-2">
            {child.interests.map((interest: string, index: number) => (
              <span key={index} className="px-2 py-1 bg-primary-50 text-primary-600 rounded-full text-xs">
                {interest}
              </span>
            ))}
          </div>
        </div>

        <div className="flex space-x-2">
          <button className="flex-1 py-2 bg-primary-100 text-primary-600 rounded-xl text-sm font-medium hover:bg-primary-200 transition-colors">
            编辑档案
          </button>
          <button className="flex-1 py-2 bg-sky-100 text-sky-600 rounded-xl text-sm font-medium hover:bg-sky-200 transition-colors">
            阅读记录
          </button>
        </div>
      </motion.div>
    )
  }

  const OrderCard: React.FC<{ order: any }> = ({ order }) => {
    const statusColors = {
      '已完成': 'bg-leaf-100 text-leaf-800',
      '配送中': 'bg-orange-100 text-orange-800',
      '待发货': 'bg-yellow-100 text-yellow-800',
      '待付款': 'bg-red-100 text-red-800'
    }

    return (
      <div className="bg-white rounded-2xl p-6 shadow-lg">
        <div className="flex items-center justify-between mb-4">
          <div>
            <p className="text-sm text-gray-500">订单号：{order.id}</p>
            <p className="text-sm text-gray-500">{order.date}</p>
          </div>
          <span className={cn("px-3 py-1 rounded-full text-xs font-medium", statusColors[order.status as keyof typeof statusColors])}>
            {order.status}
          </span>
        </div>
        
        <div className="space-y-2 mb-4">
          {order.items.map((item: any, index: number) => (
            <div key={index} className="flex justify-between text-sm">
              <span className="text-gray-700">{item.name}</span>
              <span className="text-gray-600">¥{item.price} × {item.quantity}</span>
            </div>
          ))}
        </div>
        
        <div className="flex items-center justify-between pt-4 border-t border-gray-100">
          <span className="font-bold text-gray-800">总计：¥{order.total}</span>
          <button className="px-4 py-2 bg-primary-100 text-primary-600 rounded-xl text-sm font-medium hover:bg-primary-200 transition-colors">
            查看详情
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-cream-50 to-sky-50">
      <div className="container mx-auto px-4 py-8">
        {/* 用户信息卡片 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-3xl p-8 shadow-xl mb-8"
        >
          <div className="flex items-center space-x-6">
            <img
              src={user.avatar}
              alt={user.name}
              className="w-20 h-20 rounded-full border-4 border-primary-100"
            />
            <div className="flex-1">
              <h1 className="text-2xl font-bold text-gray-800 mb-2">{user.name}</h1>
              <p className="text-gray-600 mb-1">{user.email}</p>
              <p className="text-gray-600 mb-2">{user.phone}</p>
              <div className="flex items-center space-x-4 text-sm">
                <span className="px-3 py-1 bg-primary-100 text-primary-600 rounded-full font-medium">
                  {user.membershipLevel}
                </span>
                <span className="text-gray-500">加入时间：{user.memberSince}</span>
              </div>
            </div>
            <button className="px-6 py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium">
              编辑资料
            </button>
          </div>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 左侧：菜单和订单 */}
          <div className="lg:col-span-2 space-y-8">
            {/* 功能菜单 */}
            <div className="bg-white rounded-3xl p-6 shadow-xl">
              <h2 className="text-xl font-bold text-gray-800 mb-6">功能菜单</h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {menuItems.map((item, index) => (
                  <motion.div
                    key={index}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    className="cursor-pointer"
                  >
                    <div className={cn("rounded-2xl p-4 text-center transition-all duration-200 hover:shadow-lg", getColorClasses(item.color))}>
                      <item.icon className="w-8 h-8 mx-auto mb-2" />
                      <p className="text-sm font-medium">{item.label}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* 最近订单 */}
            <div className="bg-white rounded-3xl p-6 shadow-xl">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-bold text-gray-800">最近订单</h2>
                <button className="text-primary-600 hover:text-primary-700 text-sm font-medium">
                  查看全部
                </button>
              </div>
              <div className="space-y-4">
                {recentOrders.map((order) => (
                  <OrderCard key={order.id} order={order} />
                ))}
              </div>
            </div>
          </div>

          {/* 右侧：孩子档案 */}
          <div className="space-y-8">
            <div className="bg-white rounded-3xl p-6 shadow-xl">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-bold text-gray-800">孩子档案</h2>
                <button className="text-primary-600 hover:text-primary-700 text-sm font-medium">
                  添加孩子
                </button>
              </div>
              <div className="space-y-4">
                {user.children.map((child) => (
                  <ChildCard key={child.id} child={child} />
                ))}
              </div>
            </div>

            {/* 快速操作 */}
            <div className="bg-white rounded-3xl p-6 shadow-xl">
              <h2 className="text-xl font-bold text-gray-800 mb-6">快速操作</h2>
              <div className="space-y-3">
                <button className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium">
                  开始今日阅读
                </button>
                <button className="w-full py-3 bg-sky-100 text-sky-600 rounded-2xl hover:bg-sky-200 transition-colors font-medium">
                  浏览新绘本
                </button>
                <button className="w-full py-3 bg-leaf-100 text-leaf-600 rounded-2xl hover:bg-leaf-200 transition-colors font-medium">
                  查看活动
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* 退出登录 */}
        <div className="mt-8 text-center">
          <button className="inline-flex items-center px-6 py-3 bg-red-100 text-red-600 rounded-2xl hover:bg-red-200 transition-colors font-medium">
            <LogOut className="w-4 h-4 mr-2" />
            退出登录
          </button>
        </div>
      </div>
    </div>
  )
}

export default Profile